import React, {
    Component
} from 'react';
import {getDisplayDate} from '../../store/action/displayData';
import echarts from 'echarts';
import {connect} from 'react-redux';
import './DisplayData.css';
@connect((state)=>({
    sexCount:state.displayData.sexCount,
    willingCount:state.displayData.willingCount
}))


class DisplayData extends Component{

    constructor(props)
    {
        super(props);
        this.state={
            sexCount:[{},{}],
            willingCount:[{},{}]
        }

       
    }



    componentDidMount(){
        let _id=this.props.match.params.id;
       
        this.props.dispatch(getDisplayDate({enrollId:_id})).then(()=>{
            let sex=[];
            let willing=[];
            for(let i=0;i<this.props.sexCount.length;i++)
            {
                let obj={};
                obj.name=this.props.sexCount[i].sex;
                obj.value=this.props.sexCount[i].number;
                sex.push(obj);
            }
            for(let i=0;i<this.props.willingCount.length;i++)
            {
                let obj={};
                obj.name=this.props.willingCount[i].willingClass;
                obj.value=this.props.willingCount[i].number;
                willing.push(obj);
            }

            this.setState({
                sexCount:sex||[],
                willingCount:willing||[]
            })
            this.handleDraw();
        });

       
    }

    handleDraw=()=>{
        let myCharts = echarts.init(document.getElementById("mycharts"));
            myCharts.setOption({
                backgroundColor: '#2c343c',
    
                title: [
                    {
                    text: '数据统计展示',
                    left: 'center',
                    top: 20,
                    textStyle: {
                        color: '#ccc'
                    },
                },{
                    subtext: '男女性别比例',
                    left: '30%',
                    top: '14%',
                    textAlign: 'center'
                },{
                    subtext: '卓越班类型人数比列',
                    left: '70%',
                    top: '14%',
                    textAlign: 'center'
                }
                ],
    
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
            
                visualMap: {
                    show: false,
                    min: -5,
                    max: 50,
                    inRange: {
                        colorLightness: [0, 1]
                    }
                },
                series: [
                    {
                        
                        name: '性别比例',
                        type: 'pie',
                        radius: '40%',
                        center: ['30%', '50%'],
                        data:this.state.sexCount.sort(function (a, b) { return a.value - b.value; }),
                        
                        label: {
                            color: 'rgba(255, 255, 255, 0.3)'
                        },
                        labelLine: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            },
                            smooth: 0.2,
                            length: 10,
                            length2: 20
                        },
                        itemStyle: {
                            color: '#c23531',
                            shadowBlur: 200,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        },
            
                        animationType: 'scale',
                        animationEasing: 'elasticOut',
                        animationDelay: function (idx) {
                            return Math.random() * 200;
                        }
                    },
                    {
                        name: '卓越班类型人数比例',
                        type: 'pie',
                        radius: '40%',
                        center: ['70%', '50%'],
                        data: [...this.state.willingCount].sort(function (a, b) { return a.value - b.value; }),
                        
                        label: {
                            color: 'rgba(255, 255, 255, 0.3)'
                        },
                        labelLine: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            },
                            smooth: 0.2,
                            length: 10,
                            length2: 20
                        },
                        itemStyle: {
                            color: '#c23531',
                            shadowBlur: 200,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        },
            
                        animationType: 'scale',
                        animationEasing: 'elasticOut',
                        animationDelay: function (idx) {
                            return Math.random() * 200;
                        }
                    }
                ]
            })
           
        
    }
    


     render(){
        return(
            <div style={{width:'100%',height:'100%'}}>
                 <div className="echarts">
                <div id="mycharts" style={{width:'100%',height:"700px"}}>
                </div>
            </div>
            </div>
           
        )
    }
}


export default DisplayData